<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复合事件</title>
    <script src="./jquery1.11.3.js"></script>
    <script>
        $(function () {
            // $('#box').mouseover(function () {
            //     $(this).css('background','red');
            // }).mouseout(function () {
            //     $(this).css('background','#99ff99');
            // });
            // $('#box').mouseenter(function () {
            //     $(this).css('background','red');
            // }).mouseleave(function () {
            //     $(this).css('background','#99ff99');
            // });


            //首先鼠标移入到父标签 mouseover操作一次 移入子标签mouseover操作哦一次，从子标签离开mouseover操作一次  需要3次操作
            // $('#box').mouseover(function () {
            //     $('strong').html(function (index,value) {
            //         return value+'1';
            //     })
            // });
            //鼠标移入到父标签 mouseover操作一次 其他都没有操作  大多数情况下用这个
            // $('#box').mouseenter(function () {
            // $('strong').html(function (index,value) {
            //     return value+'1';
            // })
            //  });
            //鼠标进入父元素#box 没操作，进入子元素div时操作了一次，离开子元素操作一次 离开父元素操作一次 操作3次
            // $('#box').mouseout(function () {
            //     $('strong').html(function (index,value) {
            //         return value+'1';
            //     })
            // });
            // mouseleave 鼠标只有离开父元素的时候才操作一次 用的多
            // $('#box').mouseleave(function () {
            //     $('strong').html(function (index,value) {
            //         return value+'1';
            //     })
            // });


 //与键盘事件相关的方法
 //            $('input').keydown(function () {
 //                alert("按下");//按下键盘上的任意键 都会激发这个事件
 //            });
 //            $('input').keyup(function () {
 //                alert("松开");//按下键盘上的任意键 都会激发这个事件
 //            });
 //            $('input').keypress(function (event) {
 //                alert(event.charCode);//获得键盘上的Unicode编码
 //            });

            // $('input').keydown(function (event) {
            //                    alert(event.keyCode);//按下键盘上的任意键 都会激发这个事件
            //   });
//与焦点相关的方法
//             $('input').focus(function () { //获得焦点
//                 alert("获得焦点");
//              });
//             $('input').blur(function () {//失去焦点 找到焦点 然后点击任意位置 失去焦点
//                 alert("失去焦点");
//             });
//             $('input').focusin(function () {
//                 alert("获得焦点");
//             });
            $('input').focusout(function () {
                alert("失去焦点");
            });


        });
    </script>
</head>
<body>
    <input type="text" name="" id="">
    <div id="box" style="width: 200px;height: 200px;background-color: #99ff99">
        <div style="width: 100px;height: 100px;background-color: #FF8F00"></div>
        <strong></strong>
    </div>
    <script>
    /* 复合事件



    * */
    </script>
</body>
</html>